import React from 'react';
import { useTheme } from '../contexts/ThemeContext';

const ThemeSwitchButton: React.FC = () => {
  const { theme, toggleTheme } = useTheme();

  // 七彩渐变样式
  const rainbowGradient = {
    background: 'linear-gradient(135deg, #ff0000, #ff8000, #ffff00, #80ff00, #00ff00, #00ff80, #00ffff, #0080ff, #0000ff, #8000ff, #ff00ff, #ff0080)',
    backgroundSize: '200% 200%',
    animation: 'rainbow 3s ease infinite',
  };

  // 添加动画样式到文档头部
  React.useEffect(() => {
    const style = document.createElement('style');
    style.innerHTML = `
      @keyframes rainbow {
        0% { background-position: 0% 50%; }
        50% { background-position: 100% 50%; }
        100% { background-position: 0% 50%; }
      }
    `;
    document.head.appendChild(style);
    
    return () => {
      document.head.removeChild(style);
    };
  }, []);

  // 根据当前主题显示不同的图标
  const getThemeIcon = () => {
    switch (theme) {
      case 'light':
        return '☀️'; // 浅色主题 - 太阳
      case 'dark':
        return '🌙'; // 深色主题 - 月亮
      default:
        return '☀️';
    }
  };

  // 根据当前主题提供准确的无障碍标签
  const getAriaLabel = () => {
    switch (theme) {
      case 'light':
        return '切换到深色主题';
      case 'dark':
        return '切换到浅色主题';
      default:
        return '切换主题';
    }
  };

  return (
    <button
      onClick={toggleTheme}
      style={{
        // 将固定定位改为相对定位，使其能正常流式布局
        position: 'relative',
        top: 'auto',
        left: 'auto',
        right: 'auto',
        width: '40px',
        height: '40px',
        borderRadius: '50%',
        border: 'none',
        cursor: 'pointer',
        zIndex: 'auto',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '20px',
        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.2)',
        marginLeft: '15px', // 添加左边距，与标题保持距离
        ...rainbowGradient,
      }}
      aria-label={getAriaLabel()}
    >
      {getThemeIcon()}
    </button>
  );
};

export default ThemeSwitchButton;